<template>
    <el-dialog v-dialog-drag :title="$t('AddPower')" :visible.sync="addPowerDialog" width="30%"
               :before-close="handleAddPowerClose">
        <el-form ref="powerForm" :model="power" :rules="rules" class="demo-ruleForm" label-width="80px">
            <el-form-item :label="$t('Picture')" prop="path" required>
                <el-col :span="11">
                    <el-select v-model="power.name" @change="changeSelectPortValue" :placeholder="$t('Please_Select')">
                        <el-option
                            v-for="img in powerImgList"
                            :key="img.path"
                            :value="img.name"
                            :label="img.name">
                            <img :src="img.path" style="width:25px;height:25px">
                        </el-option>


                    </el-select>
                </el-col>
                <el-col :span="11">
                    <img v-show="power.path" :src="power.path" align="center"
                         style="width:25px;height:25px;margin-left: 5px">
                </el-col>

            </el-form-item>
            <el-form-item :label="$t('Width')" prop="width">
                <el-input v-model="power.width"></el-input>
            </el-form-item>
            <el-form-item :label="$t('Height')" prop="height">
                <el-input v-model="power.height"></el-input>
            </el-form-item>
            <el-form-item :label="$t('PowerNum')" prop="powerNum">
                <el-input v-model="power.powerNum"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitForm('powerForm')">{{$t('Confirm')}}</el-button>
            <el-button size="small" @click="handleAddPowerClose">{{$t('Cancel')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import * as appServer from '../../../store/appServerParams.js'
    export default {
        props : {
            addPowerDialog: false,
        },
        data: function () {
            return{
                power: {//将要添加的port
                    width: 30,
                    height: 30,
                    path:"",
                    powerNum:"",
                    name: "",
                },
                powerImgList: [],
                rules: {
                    path: [{required: true, message: this.$t('Please_Select_Img')}],
                    width: [{required: true, message: this.$t('Please_Input_Width')}],
                    height: [{required: true, message: this.$t('Please_Input_Height')}],
                    powerNum: [{required: true, message: this.$t('Please_Input_PowerNum')}],
                }
            }


        },
        methods:{
            handleAddPowerClose(done) {
                this.$parent.addPowerDialog = false
            },
            changeSelectPortValue(value) {
                let vm = this;
                for(let index  in vm.powerImgList){
                    let item =  vm.powerImgList[index];
                    if (item.name == value) {
                        vm.power.name = item.name;
                        vm.power.path = item.path;
                        return;
                    }
                }
            },
            addPowerImg() {
                let vm = this;
                let img = new Image()
                img.src = vm.power.path;
                img.onload = function () {
                    vm.$parent.addImg(vm.$parent.powerGroup, vm.power.width, vm.power.height, vm.power.path, vm.power.name, 'power',vm.power.powerNum);
                    vm.$parent.addPowerDialog = false;
                }
            },
            getPowerImgList() {
                let vm = this;
                vm.$http
                    .get('sys/getPowerImgList')
                    .then(function (response) {
                        vm.powerImgList = [];
                        for (var index in response.data.imgList) {
                            let imgInfo = response.data.imgList[index];
                            imgInfo.path = appServer.BASE_URL + imgInfo.path;
                            vm.powerImgList.push(imgInfo);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addPowerImg();
                    } else {
                        return false;
                    }
                });
            }

        },
        mounted() {
            var vm = this;
            vm.getPowerImgList();
        }
    }
</script>

<style scoped>

</style>
